iT邦幫忙

2025 iThome 鐵人賽
DAY 5
1
Modern Web

關於那些有趣的 CSS 效果系列 第 5 篇

( Day 5 ) 純 CSS 電子時鐘數字 ( 七段顯示器數字 )

17th鐵人賽 css css教學
472 瀏覽

  • 分享至 

  • xImage
    •  

記得當時在玩物聯網時，第一眼看到「七段顯示器」，就想要用 CSS 手刻這個效果，後來還真的用虛擬元素把它做了出來，隨著年齡增長，再次看到這個效果時，又手癢把它拿起來修改，不僅把虛擬元素的效果改得更好，還額外使用了 clip-path 的方法產生同樣的效果，透過這篇文章分享給大家～

正文開始

這篇教學會運用兩種方法，分別是「裁切路徑 clip-path」和「虛擬元素 before 和 after」，製作常見的「電子時鐘數字」( 也可稱作七段顯示器數字，這種效果也可以呈現英文字母 )。

CSS 教學 - CSS 製作電子時鐘 ( 七段顯示器 )

裁切路徑 clip-path 製作電子時鐘數字

透過 CSS 的裁切路徑 clip-path 樣式屬性需要先了解電子時鐘的組成架構，參考下圖，如果元素的高度為 20px，左右三角形內縮的距離就是 10px，確定這個架構之後，不論使用何種方式製作，都可以輕鬆駕馭元素形狀。

CSS 教學 - CSS 製作電子時鐘 ( 七段顯示器 ) - 電子時鐘的架構

下方範例會根據電子時鐘架構，將元素裁切出特定的形狀，這個形狀也是組合成電子時鐘的基本形狀。

<!-- HTML 程式碼 -->
<div class="num"><div></div></div>

<!-- CSS 程式碼 -->
<style>
  .num {
    position: relative;
    margin: 20px;
  }
  .num div{
    width: 100px;
    height: 20px;
    background: #c00;  
    clip-path: polygon(0 50%, 10px 0, 90px 0, 100% 50%, 90px 100%, 10px 100%); /* 裁切路徑  */
    position: absolute;
  }
</style>

CSS 教學 - CSS 製作電子時鐘 ( 七段顯示器 ) - 電子時鐘的基本形狀

修改 HTML 程式碼，在父元素 div 改成 num 屬性，如此一來只要指定數字就可以產生對應的數位數字，接著按照下方範例修改 CSS，範例中會先將七塊組成元素透過旋轉、定位的方式擺放在特定位置，並根據 num 屬性數字隱藏特定位置的元素，就能產生指定的數字 ( 尺寸可再自行調整，或透過 transform 改變 )。

html >>>>
<!-- HTML 程式碼 -->
<div num="0"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div num="1"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div num="2"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div num="3"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div num="4"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div num="5"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div num="6"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div num="7"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div num="8"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div num="9"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

<!-- CSS 程式碼 -->
<style>
  [num] {
    position: relative;
    margin: 20px;
    width: 110px;
    height: 210px;
    float: left;
  }
  /* 數字主要的光棒 */
  [num] div{
    width: 100px;
    height: 20px;
    background: #000;  
    clip-path: polygon(0 50%, 10px 0, 90px 0, 100% 50%, 90px 100%, 10px 100%);
    position: absolute;
  }
  /* 數字主要的光棒：上方 */
  [num] div:nth-of-type(1){
    top: 0;
    left: 0;
  }
  /* 數字主要的光棒：左上 */
  [num] div:nth-of-type(2){
    transform: rotate(90deg);
    top: 52px;
    left: -50px;
  }
  /* 數字主要的光棒：右上 */
  [num] div:nth-of-type(3){
    transform: rotate(90deg);
    top: 52px;
    left: 50px;
  }
  /* 數字主要的光棒：中間 */
  [num] div:nth-of-type(4){top: 104px;}
  /* 數字主要的光棒：左下 */
  [num] div:nth-of-type(5){
    transform: rotate(90deg);
    top: 156px;
    left: -50px;
  }
  /* 數字主要的光棒：右下 */
  [num] div:nth-of-type(6){
    transform: rotate(90deg);
    top: 156px;
    left: 50px;
  }
  /* 數字主要的光棒：正下方 */
  [num] div:nth-of-type(7){top: 208px;}

  /* 數字 1 */
  [num="1"] div:nth-of-type(1),
  [num="1"] div:nth-of-type(2),
  [num="1"] div:nth-of-type(4),
  [num="1"] div:nth-of-type(5),
  [num="1"] div:nth-of-type(7){
    display:none;
  }
  /* 數字 2 */
  [num="2"] div:nth-of-type(2),
  [num="2"] div:nth-of-type(6){
    display:none;
  }
  /* 數字 3 */
  [num="3"] div:nth-of-type(2),
  [num="3"] div:nth-of-type(5){
    display:none;
  }
  /* 數字 4 */
  [num="4"] div:nth-of-type(1),
  [num="4"] div:nth-of-type(5),
  [num="4"] div:nth-of-type(7){
    display:none;
  }
  /* 數字 5 */
  [num="5"] div:nth-of-type(3),
  [num="5"] div:nth-of-type(5){
    display:none;
  }
  /* 數字 6 */
  [num="6"] div:nth-of-type(3){
    display:none;
  }
  /* 數字 7 */
  [num="7"] div:nth-of-type(2),
  [num="7"] div:nth-of-type(4),
  [num="7"] div:nth-of-type(5),
  [num="7"] div:nth-of-type(7){
    display:none;
  }
  /* 數字 9 */
  [num="9"] div:nth-of-type(5){
    display:none;
  }
  /* 數字 0 */
  [num="0"] div:nth-of-type(4){
    display:none;
  }
</style>

CSS 教學 - CSS 製作電子時鐘 ( 七段顯示器 ) - 裁切路徑 clip-path 製作電子時鐘

虛擬元素 before 和 after 製作電子時鐘數字

除了使用裁切路徑的方式製作，也可以利用虛擬元素 ::before 和 ::after 產生寶石形狀左右的三角形，下圖展示虛擬元素製作三角形的原理，首先把虛擬元素的寬高都設為 0，接著只要設定四個邊框，並將不需要呈現的邊框設為透明色，就能產生漂亮的三角形。

<!-- HTML 程式碼 -->
<div class="num"><div></div></div>

<!-- CSS 程式碼 -->
<style>
  .num {
    position: relative;  /* 提供子元素絕對定位 */
    margin: 20px;
  }
  .num div {
    width: 80px;
    height: 20px;
    background: #c00;
    position: absolute;  /* 元素絕對定位 */
  }
  .num div::before,
  .num div::after{
    content: "";
    position: absolute;  /* 虛擬元素絕對定位 */
    width: 0;            /* 虛擬元素尺寸為 0 */
    height: 0;
    top: 0;
    border-width: 10px;  /* 虛擬邊框寬度 */
    border-style: solid; /* 虛擬邊框樣式 */
  }
  .num div::before {
    border-color: #0000 #c00 #0000 #0000; /* 左側虛擬元素只有右邊邊框有顏色 */
    left: -20px;
  }
  .num div::after {
    border-color: #0000 #0000 #0000  #c00; /* 右側虛擬元素只有左邊邊框有顏色 */
    right: -20px;
  }
</style>

CSS 教學 - CSS 製作電子時鐘 ( 七段顯示器 ) - 虛擬元素產生漂亮的三角形

了解原理後，修改 HTML 程式碼，在父元素 div 改成 num 屬性，如此一來只要指定數字就可以產生對應的數位數字，接著按照下方範例修改 CSS，範例中會先將七塊組成元素透過旋轉、定位的方式擺放在特定位置，並根據 num 屬性數字隱藏特定位置的元素，就能產生指定的數字 ( 尺寸可再自行調整，或透過 transform 改變 )。

html >>>>
<!-- HTML 程式碼 -->
<div num="0"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div num="1"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div num="2"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div num="3"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div num="4"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div num="5"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div num="6"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div num="7"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div num="8"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div num="9"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>


<!-- CSS 程式碼 -->
<style>
  [num] {
    position: relative;
    margin: 0;
    width: 110px;
    height: 210px;
    float: left;
    transform: scale(60%);
  }
  [num] div {
    width: 80px;
    height: 20px;
    background: #000;
    position: absolute;
  }
  [num] div::before,
  [num] div::after{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    border-width: 10px;
    border-style: solid;
  }
  [num] div::before {
    border-color: #0000 #000 #0000 #0000;
    left: -20px;
  }
  [num] div::after {
    border-color: #0000 #0000 #0000 #000;
    right: -20px;
  }
  /* 數字主要的光棒：上方 */
  [num] div:nth-of-type(1){
    top: 0;
    left: 0;
  }
  /* 數字主要的光棒：左上 */
  [num] div:nth-of-type(2){
    transform: rotate(90deg);
    top: 52px;
    left: -50px;
  }
  /* 數字主要的光棒：右上 */
  [num] div:nth-of-type(3){
    transform: rotate(90deg);
    top: 52px;
    left: 50px;
  }
  /* 數字主要的光棒：中間 */
  [num] div:nth-of-type(4){top: 104px;}
  /* 數字主要的光棒：左下 */
  [num] div:nth-of-type(5){
    transform: rotate(90deg);
    top: 156px;
    left: -50px;
  }
  /* 數字主要的光棒：右下 */
  [num] div:nth-of-type(6){
    transform: rotate(90deg);
    top: 156px;
    left: 50px;
  }
  /* 數字主要的光棒：正下方 */
  [num] div:nth-of-type(7){top: 208px;}

  /* 數字 1 */
  [num="1"] div:nth-of-type(1),
  [num="1"] div:nth-of-type(2),
  [num="1"] div:nth-of-type(4),
  [num="1"] div:nth-of-type(5),
  [num="1"] div:nth-of-type(7){
    display:none;
  }
  /* 數字 2 */
  [num="2"] div:nth-of-type(2),
  [num="2"] div:nth-of-type(6){
    display:none;
  }
  /* 數字 3 */
  [num="3"] div:nth-of-type(2),
  [num="3"] div:nth-of-type(5){
    display:none;
  }
  /* 數字 4 */
  [num="4"] div:nth-of-type(1),
  [num="4"] div:nth-of-type(5),
  [num="4"] div:nth-of-type(7){
    display:none;
  }
  /* 數字 5 */
  [num="5"] div:nth-of-type(3),
  [num="5"] div:nth-of-type(5){
    display:none;
  }
  /* 數字 6 */
  [num="6"] div:nth-of-type(3){
    display:none;
  }
  /* 數字 7 */
  [num="7"] div:nth-of-type(2),
  [num="7"] div:nth-of-type(4),
  [num="7"] div:nth-of-type(5),
  [num="7"] div:nth-of-type(7){
    display:none;
  }
  /* 數字 9 */
  [num="9"] div:nth-of-type(5){
    display:none;
  }
  /* 數字 0 */
  [num="0"] div:nth-of-type(4){
    display:none;
  }
</style>

CSS 教學 - CSS 製作電子時鐘 ( 七段顯示器 ) - 虛擬元素 before 和 after 製作電子時鐘

小結

透過「裁切路徑 clip-path」和「虛擬元素 before 和 after」製作電子時鐘都是常見的做法，搭配 CSS 的屬性選擇器也讓程式更加彈性好修改。


上一篇
( Day 4 ) 純 CSS 製作跑馬燈效果
下一篇
( Day 6 ) 純 CSS 漸層色邊框
系列文
關於那些有趣的 CSS 效果 共 36 篇
  1. 32
    ( Day 32 ) 純 CSS 點擊展開或收折的選單
  2. 33
    ( Day 33 ) 純 CSS 點擊愛心圖案的放射效果
  3. 34
    ( Day 34 ) 純 CSS 數字進度條 ( 會動呦 )
  4. 35
    ( Day 35 ) 純 CSS 碼表 ( 可計時 )
  5. 36
    CSS，依然讓我怦然心動！( 純純的連續 36 天完賽心得 )
完整目錄
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
iThome鐵人賽
參賽組數
902 組
團體組數
37 組
累計文章數
7624 篇
完賽人數
89 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 17th鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react
熱門問題
熱門回答
熱門文章
IT邦幫忙